<template>
  <div>
    <el-card class="box-card">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item ><a href="https://element.eleme.io" >首页</a></el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: '/home'}">主页</el-breadcrumb-item>
        <el-breadcrumb-item >评论区</el-breadcrumb-item>
      </el-breadcrumb><br />

       <el-row :gutter="20">
         <el-col :span="9">
            <!-- 3.定义搜索框 -->
            <el-input placeholder="搜索你感兴趣的内容" v-model="queryInfo.query" >
                <el-button slot="append" icon="el-icon-search" @click="getCommentList"></el-button>
            </el-input>
         </el-col>
       </el-row><br />

       <el-table :data="commentList"  stripe>
           <el-table-column type="index" label="序号"></el-table-column>
           <el-table-column prop="username" label="用户名"></el-table-column>
           <el-table-column prop="content" label="评论内容"></el-table-column>
           <el-table-column prop="createdtime" label="评论时间"></el-table-column>
           <el-table-column label="操作">
             <template slot-scope="scope">
                <el-button type="danger" icon="el-icon-delete" size="small" @click="deleteComment(scope.row)"></el-button>
             </template>
           </el-table-column>
       </el-table><br />
           <el-input placeholder="说点什么吧..." v-model="addComment.content" type="textarea" :rows="4"></el-input><br /><br />
           <el-button type="primary" @click="addCommentBtn" >发表评论</el-button>
        <el-pagination
             background
             @size-change="handleSizeChange"
             @current-change="handleCurrentChange"
             :current-page="queryInfo.pageNum"
             :page-sizes="[5, 10, 15, 20]"
             :page-size="queryInfo.pageSize"
             layout="total, sizes, prev, pager, next, jumper"
             :total="total">
        </el-pagination>
    </el-card>
  </div>
</template>

<script>

  export default {
    data(){
      return {
        textarea: '',
        queryInfo: {
          query: '',
          pageNum: 1,
          pageSize: 5
        },
        commentList: [],
        //记录总数是数值类型
        total: 0,
        dialogVisible: false,
        addComment: {
          id:"",
          username:"用户某",
          content:"",
          createdtime:""
        }
      }
    },
    methods: {
      async getCommentList(){
        const {data: result} = await this.$http.get('/comment/find',{
           params: this.queryInfo
        })
        if(result.status !== 200) return this.$message.error("评论列表查询失败")
        this.commentList = result.data.rows
        this.total = result.data.total
        this.queryInfo.content={}
      },
      handleSizeChange(pageSize){
        //console.log("每页展现的条数"+pageSize)
        this.queryInfo.pageSize = pageSize
        this.getCommentList()
      },
      handleCurrentChange(pageNum){
        //console.log("页数:"+pageNum)
        this.queryInfo.pageNum = pageNum
        this.getCommentList()
      },

      async deleteComment(commentList){
         //1.消息确认框
         const result =  await this.$confirm('此操作将永久删除 '+commentList.username+'的评论, 是否继续?', '提示', {
                   confirmButtonText: '确定',
                   cancelButtonText: '取消',
                   type: 'warning'
                 }).catch(error => error)

         //如果确认  confirm  如果取消 cancel
         if(result !== 'confirm'){
            return this.$message.info("删除取消")
         }
         const {data: result2} = await this.$http.delete(`/comment/${commentList.id}`)
         if(result2.status !== 200) return this.$message.error("删除失败")
         this.$message.success("删除成功")
         //重新加载 数据
         this.getCommentList()
      },
      async addCommentBtn(){
        if(this.addComment.content.length===0 ){
          alert("不能发表空的内容哦")
          return
        }
        if(this.addComment.content.length>=100){
          alert("字数长度超过限制")
          return
        }
        const {data: result} = await this.$http.post('/comment/addComment',this.addComment)
        if(result.status !== 200) return this.$message.error("评论失败")
        this.$message.success("评论成功")
        this.addComment={}
        this.getCommentList()

      },
    },
    //利用钩子函数实现数据查询
    mounted(){
      this.getCommentList()
    }
  }
</script>


<style lang="less" scoped>
  .el-pagination {
      text-align: center;
  }
</style>
